// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import CustomTabBar from '@/components/CustomTabBar'
import HomePage from '@/components/home/index'
import MyPage from '@/components/my/index'
import ServicePage from '@/components/service/index'
import myIcon from '@/assets/icon_my.png'
import lifaIcon from '@/assets/icon_lifa.png'
import homeServiceIcon from '@/assets/icon_home_service.png'
import "./index.scss"
interface TabItem {
  title: string
  icon: string
  path: string
}

const Index: React.FC = () => {
  const [currentTab, setCurrentTab] = useState(2)

  const tabList: TabItem[] = [
    { title: '首页', icon: lifaIcon, path: '' },
    { title: '服务', icon: homeServiceIcon, path: '' },
    { title: '我的', icon: myIcon, path: '' },
  ]

  // 切换 tab
  const handleTabChange = (index: number) => {
    setCurrentTab(index)
  }

  // 滑动切换事件（Swiper 自动触发）
  const handleSwiperChange = (e: any) => {
    setCurrentTab(e.detail.current)
  }

  return (
    <View className="index-wrapper">
      {/* Swiper 模拟 ViewPager */}
      <Swiper
        className="swiper-wrapper"
        current={currentTab}
        onChange={handleSwiperChange}
        duration={300}
      >
        <SwiperItem>
          <HomePage />
        </SwiperItem>
        <SwiperItem>
          <ServicePage />
        </SwiperItem>
        <SwiperItem>
          <MyPage />
        </SwiperItem>
      </Swiper>

      {/* 自定义底部导航栏 */}
      <CustomTabBar
        current={currentTab}
        onChange={handleTabChange}
        tabList={tabList}
        showCenterButton={false}
        hide={false}
      />
    </View>
  )
}

export default Index
